<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html+css</title>
    <link rel="stylesheet" href="./indexA.css" id="stylelink">
    <!-- <script src="./index.js"> -->
    </script>
</head>
<body>
    <div id="main">
        <table >
            <!-- <caption>Characteristics with positive and negative sides</caption> -->
            <thead>
            <tr class="firsthead">
                <th > Item</th>
                <th> Manufacturer</th>
                <th> Size</th>
                <th> Unit Price</th>
                <th> Quantity</th>
                <th> Total Price</th>
            <!-- <tbody> -->
            </tr>
            <tr class="tr_odd">
                <th id="n"> Corn Flakes</th>
                <th> Kellogg's</th>
                <th> 18 oz</th>
                <th class="content-align"> 2.50</th>
                <th class="content-align"> 1</th>
                <th class="content-align"> 2.50</th>
            <!-- <tbody> -->
            </tr>
            <tr class="tr_even">
                <th id="n"> Solid White Tuna</th>
                <th> Starkist</th>
                <th> 5 oz</th>
                <th class="content-align"> 2.79 </th>
                <th class="content-align"> 2</th>
                <th class="content-align"> 5.58</th>
                  <!-- <tbody> -->
            </tr>
            <tr class="tr_odd">
                <th id="n"> Cream of Mushroom Soup</th>
                <th> Campbell's</th>
                <th> 10.75 oz</th>
                <th class="content-align"> 1.00 </th>
                <th class="content-align"> 2</th>
                <th class="content-align"> 2.00</th>
                  <!-- <tbody> -->
            </tr>
            <tr class="tr_even">
                <th id="n"> 2% Lowfat Milk</th>
                <th> Safeway</th>
                <th> 0.5 gal</th>
                <th class="content-align"> 1.99</th>
                <th class="content-align"> 1</th>
                <th class="content-align"> 1.99 </th>
                  <!-- <tbody> -->
            </tr>
            <tr class="tr_odd padding">
                <th id="n"> Extra-Wide Egg Noodles</th>
                <th> Golden Grain</th>
                <th> 12 oz </th>
                <th class="content-align"> 0,87</th>
                <th class="content-align"> 3</th>
                <th class="content-align"> 2.61</th>
            <!-- <tbody> -->
            </tr>
            
            <tr class="footer">
                <th colspan="4">
                    Total
                </th>
                <th class="content-align">
                    9
                </th>
                <th class="content-align">
                    14.68
                </th>
            </tr>      
            <!-- <tr>
              <td headers="n r1"> Sad</td>
              <td id="r1"> Mood</td>
              <td> Happy</td>
            </tr>
            <tr>
              <td headers="n r2"> Failing
              <th id="r2"> Grade
              <td> Passing -->
          </table>
    </div>
    <button onclick="changeStyle()">change style</button>
</body>
</html>